<template>
	<view>
		<view class="search-box">
			<view class="input-box">
				<view><image class="searchImg" src="../../static/icon/放大镜.png"></image></view>
				<view class="searchContent"><input type="text" v-model="searchContent" @click="clearInput"></view>
			</view>
			<view class="searchText" @click="clickSearch(searchContent)"><text style="text-align: center; margin-left: 15rpx;">搜索</text></view>
		</view>
		<view class="bbb">
			<goods-list :products=products @gotoGoodsDetailPage="gotoGoodsDetailPage"></goods-list>
			<bottom-content></bottom-content>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../component/goods-list/goods-list.vue';
	import bottomContent from '../../component/bottom-content/bottom-content.vue';
	
	export default {
		data() {
			return {
				searchContent: "Vivo全新IQOO5手机",
				products: [
					{
						"id": 1,
						"name": "华为荣耀Mate10全新上市潮流新机!全新上市潮流新机!全新上市潮流新机!",
						"cPrice": 2299,
						"oPrice": 3900,
						"url": '../../static/img/1.jpg'
					},
					{
						"id": 2,
						"name": "小米11高通骁龙777全能王游戏高手最爱!全能王游戏高手最爱!",
						"cPrice": 2145,
						"oPrice": 3650,
						"url": '../../static/img/2.jpg'
					},
					{
						"id": 3,
						"name": "Vivo全新IQOO5系列女神之手送礼最佳之选!送礼最佳之选!送礼最佳之选!",
						"cPrice": 2999,
						"oPrice": 3988,
						"url": '../../static/img/3.jpg'
					},
					{
						"id": 4,
						"name": "华为荣耀Mate10全新上市潮流新机!全新上市潮流新机!全新上市潮流新机!",
						"cPrice": 2299,
						"oPrice": 3900,
						"url": '../../static/img/1.jpg'
					},
					{
						"id": 5,
						"name": "小米11高通骁龙777全能王游戏高手最爱!全能王游戏高手最爱!",
						"cPrice": 2145,
						"oPrice": 3650,
						"url": '../../static/img/2.jpg'
					},
					{
						"id": 6,
						"name": "Vivo全新IQOO5系列女神之手送礼最佳之选!送礼最佳之选!送礼最佳之选!",
						"cPrice": 2999,
						"oPrice": 3988,
						"url": '../../static/img/3.jpg'
					}
				]
			}
		},
		components:{
			"goods-list": goodsList,
			"bottom-content": bottomContent
		},
		methods: { 
			clickSearch(searchContent) {
				console.log("开始搜索:", searchContent);
			},
			clearInput() {
				this.searchContent = "";
			},
			gotoGoodsDetailPage(id){
				console.log("父组件接收到参数为：", id);
				uni.navigateTo({
					url: "../index/goodsDetails/goodsDetails?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.bbb {
		background: #eee;
	}
	.search-box {
		width: 95%;
		height: 80upx;
		margin:20upx auto;
		display: flex;
		justify-content: space-between;
	}
	.input-box {
		width: 80%;
		height: 80%;
		line-height: 60upx;
		display: flex;
		background:#F0F0F0;
		margin: 10upx 0 0 20rpx;
	}
	.searchImg {
		width:40upx;
		height: 40upx;
		margin:10upx 10upx 20upx 20upx;
	}
	.searchContent {
		font-size: 16px;
		color: #7A7E83;
		margin: 10rpx 0;
	}
	.searchText {
		width: 13%;
		height: 100%;
		line-height: 80upx;
		display: flex;
		background: #b50e03;
		color: #fff;
		text-align: center;
		border-radius: 28rpx;
	}
</style>
